<!-- 用户信息(资料编辑) -->
<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar fixed >
      <template #left>
        <van-icon @click="onBack" name="arrow-left" size="20px" color="gray" style="font-weight: bold;width: 20px"/>
      </template>
      <template #title>
        <span style="color: #FF8800;font-size: 18px">基本资料</span>
      </template>
    </van-nav-bar>
    <!-- 列表 -->
    <div style="padding: 50px 0 10px 20px;font-size: 16px">
      <div v-for="(item,idx) in list" :key="idx">
        <div style="display: flex; justify-content: flex-start; align-items: center;margin: 10px 10px" @click="onClickList(idx)">
          <div style="width: 25%; text-align: left">{{item.name}}</div>
          <div style="width:80%; display: flex; justify-content: flex-end; align-items: center;">
            <van-image v-if="item.type==='avatar'" round width="2.8rem" height="2.8rem" :src="item.val "></van-image>
            <span v-else style="color: grey">{{item.val}}</span>
            <van-icon name="arrow" style="margin: 0 10px"></van-icon>
          </div>
        </div>
        <div style="border-bottom: 1px solid #ebedf0;transform: scaleY(.5)"></div>
      </div>
    </div>
    <!-- 编辑弹出层 -->
    <van-popup v-model="showEdit" position="bottom" :style="{ height: '40%' }"  round :close-on-click-overlay="false" safe-area-inset-bottom>
      <!-- 日期(生日) -->
      <van-datetime-picker
        v-if="this.currEditType==='birth'"
        v-model="currDate"
        type="date"
        title="选择生日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onChoseDate"
        @cancel="onCancelEdit"
        confirm-button-text="保存"
      />
      <!-- 性别 -->
      <van-picker
        v-if="this.currEditType==='gender'"
        :default-index="gender"
        title="选择性别"
        visible-item-count="3"
        show-toolbar
        :columns="genderList"
        @confirm="onChoseGender"
        @cancel="onCancelEdit"
        confirm-button-text="保存"
      />
      <!-- 昵称 -->
      <div v-if="this.currEditType==='nick'">
        <div style="padding: 10px 15px; display: flex; justify-content: space-between; font-size: 14px; color: #1989fa;">
          <div @click="onCancelEdit">取消</div>
          <div style="font-size: 16px; color: black">昵称</div>
          <div @click="onSaveNick">保存</div>
        </div>
        <div style="border-bottom: 1px solid #ebedf0;transform: scaleY(.5)"></div>
        <van-field
          v-model="nick"
          type="textarea"
          placeholder="请输入昵称"
          style="font-size: 18px; font-weight: bold"
        />
      </div>
      <!-- 签名 -->
      <div v-if="this.currEditType==='sign'">
        <div style="padding: 10px 15px; display: flex; justify-content: space-between; font-size: 14px; color: #1989fa;">
          <div @click="onCancelEdit">取消</div>
          <div style="font-size: 16px; color: black">个性签名</div>
          <div @click="onSaveSign">保存</div>
        </div>
        <div style="border-bottom: 1px solid #ebedf0;transform: scaleY(.5)"></div>
        <van-field
          v-model="sign"
          rows="2"
          autosize
          type="textarea"
          maxlength="50"
          placeholder="据说签名一定要有个性~~~"
          show-word-limit
          style="font-size: 18px; font-weight: bold"
        />
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'UserInfo',
  data () {
    return {
      list: [
        { type: 'avatar', name: '头像', val: '', link: '' },
        { type: 'account', name: '账号', val: '', link: '' },
        { type: 'phone', name: '绑定手机', val: '', link: '' },
        { type: 'nick', name: '昵称', val: '', link: '' },
        { type: 'gender', name: '性别', val: '', link: '' },
        { type: 'birth', name: '生日', val: '', link: '' },
        { type: 'sign', name: '个性签名', val: '', link: '' },
        { type: 'registerTime', name: '注册时间', val: '', link: '' }
      ],
      currEditType: '', // 当前编辑类型
      showEdit: false,
      // 日期
      currDate: new Date(),
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      genderList: ['帅哥', '美女', '保密'],
      // ---------------
      gender: 1, // 性别
      birth: new Date(), // 生日
      nick: '', // 昵称
      sign: '' // 签名
    }
  },
  methods: {
    // 初始化list里的val
    InitData () {
      let userInfo = this.$store.getters.GetUser
      if (userInfo) {
        this.list[0].val = userInfo.avatar
        this.list[1].val = userInfo.account
        this.list[2].val = userInfo.phoneNum
        this.list[3].val = userInfo.nick
        this.list[4].val = userInfo.gender
        switch (userInfo.gender) {
          case 0:
            this.list[4].val = '保密'
            break
          case 1:
            this.list[4].val = '帅哥'
            break
          case 2:
            this.list[4].val = '美女'
            break
        }
        this.list[5].val = userInfo.birth
        this.list[6].val = userInfo.signature
        this.list[7].val = this.$util.getDate(userInfo.createTime)
      }
    },
    // 返回
    onBack () {
      this.$router.back()
    },
    // 点击列表
    onClickList (idx) {
      switch (this.list[idx].type) {
        case 'account':
          this.$router.push('/editAccount')
          return
        case 'avatar':
          this.$router.push('/editAvatar')
          return
        case 'phone':
          this.$router.push('/editPhone')
          return
        case 'registerTime':
          return
      }
      this.currEditType = this.list[idx].type
      this.showEdit = true
    },
    // 取消编辑
    onCancelEdit () {
      this.showEdit = false
    },
    // 日期选择
    onChoseDate (val) {
      this.currDate = val
      this.showEdit = false
      // 提交服务器
      let req = {}
      if (this.currEditType === 'birth') {
        this.birth = this.$util.formatDate(this.currDate)
        req = { birth: this.birth }
      }
      this.$api.editBaseInfoReq(req).then(
        (resp) => {
          if (resp.errMsg === 'OK') {
            this.list[5].val = this.birth
            this.$store.commit('SetUserBirth', this.birth)
          } else {
            this.$toast(resp.errMsg)
          }
        }
      )
    },
    // 性别选择
    onChoseGender (val, idx) {
      this.gender = idx
      let g = this.gender + 1
      this.showEdit = false
      // 提交服务器
      this.$api.editBaseInfoReq({ gender: g }).then(
        (resp) => {
          if (resp.errMsg === 'OK') {
            switch (g) {
              case 1:
                this.list[4].val = '帅哥'
                break
              case 2:
                this.list[4].val = '美女'
                break
              case 3:
                this.list[4].val = '保密'
                break
            }
            this.$store.commit('SetUserGender', g)
          } else {
            this.$toast(resp.errMsg)
          }
        }
      )
    },
    // 保存昵称
    onSaveNick () {
      this.showEdit = false
      // 提交服务器
      this.$api.editBaseInfoReq({ nick: this.nick }).then(
        (resp) => {
          if (resp.errMsg === 'OK') {
            this.list[3].val = this.nick
            this.$store.commit('SetUserNick', this.nick)
          } else {
            this.$toast(resp.errMsg)
          }
        }
      )
    },
    // 保存签名
    onSaveSign () {
      this.showEdit = false
      // 提交服务器
      this.$api.editBaseInfoReq({ sign: this.sign }).then(
        (resp) => {
          if (resp.errMsg === 'OK') {
            this.list[6].val = this.sign
            this.$store.commit('SetUserSign', this.sign)
          } else {
            this.$toast(resp.errMsg)
          }
        }
      )
    }
  },
  mounted () {
    this.InitData()
  },
  activated () {
    this.InitData()
  }
}
</script>

<style scoped>

</style>
